<template>
  <div class="App">
    <h1>我是APP11: {{ msg }}</h1>
    <button @click="msg = 'react'">修改msg</button>
    <button @click="count++">修改count</button>
    <button @click="$destroy()">销毁我</button>
    <Count :count="count" />
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  data() {
    return {
      msg: "vue",
      count: 0,
    };
  },
  components: {
    Count,
  },
  beforeCreate() {
    console.log("------beforeCreate");
  },
  created() {
    console.log("-----created");
  },
  beforeMount() {
    console.log("-----beforeMount");
  },
  mounted() {
    console.log("-----mounted");
  },
  beforeUpdate() {
    console.log("-----beforeUpdate");
  },
  updated() {
    console.log("-----updated");
  },
  beforeDestroy() {
    console.log("-----beforeDestroy");
  },
  destroyed() {
    console.log("------destroyed");
  },
};
</script>
